<template>
	<view class="container">
		<view class="visitor">
			<view class="outside">
				<view class="within">
					<view class="info">
						<view class="name">
							<text>{{infoData.name}}</text>
							<!-- <text class="classType">【门诊】</text> -->
							<view class="btn m-l-30" @click="showVisitCard=true">
								<img src="@/static/images/qiehuan.png" style="width:29rpx;margin-right:8rpx;"></img>
								切换就诊人
							</view>
						</view>
						<view class="cord">
							卡号
						</view>
						<view>{{$desensitizationNormalStr(infoData.cardNum)}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="screenType">
			<view class="typeLeft">
				<uni-datetime-picker type="date" :end="endTime" v-model="beginTime"
					@change="beginChange($event)">{{beginTime}}</uni-datetime-picker>
				<view style="margin: 0 10rpx;">-</view>
				<uni-datetime-picker type="date" :start="beginTime" v-model="endTime"
					@change="endChange($event)">{{endTime}}</uni-datetime-picker>
			</view>
		</view>
		<view class="noCard" v-if="payList.length == 0">
			<view class="images">
				<img src="@/static/images/noCard.png" alt="">
				<view>
					未查询到信息
				</view>
			</view>
		</view>
		<view class="list" v-else>
			<scroll-view class="scroll-view_H" scroll-y="true" style="height: calc(100vh - 340rpx);">
				<view class="doctorItem" v-for="(item,index) in payList" :key="index">
					<view class="top" style="margin-bottom: 32rpx;">
						<text style="font-size: 28rpx;">{{item.name}}</text>
						<text>{{ '￥'+item.contrAmount}}</text>
					</view>
					<view class="bottom">
						<text
							style="font-size: 24rpx;color: #666;">{{item.captExpTime != null && item.captExpTime != ''? item.captExpTime.substring(0,19):''}}</text>
						<text style="font-size: 24rpx;color: #666;">{{item.payMethod}}</text>
					</view>
				</view>

			</scroll-view>

		</view>

		<!-- <liuCalendarDate ref="calendar2" isRange @checked='changeTime'></liuCalendarDate> -->
		<!-- 切换就诊人 -->
		<u-popup :show="showVisitCard" :round="10" :safeAreaInsetBottom="true" mode="bottom">
			<switchVisitCard :visitData="visitList" :relations="relationTrans" @closeVisit="close" />
		</u-popup>

	</view>
</template>
<script>
	import {
		getPatientBaseList
	} from "@/api/card/index.js"
	import {
		getDepositRecord
	} from "@/api/pay/index.js"
	import switchVisitCard from '@/components/switchVisitCard/index.vue';
	import liuCalendarDate from '@/components/liu-calendar-date/liu-calendar-date.vue';
	import {
		getDictType
	} from "@/api/system/public.js";
	import {
		EventBus
	} from "@/utils/event-bus.js";
	export default {
		components: {
			switchVisitCard,
			liuCalendarDate
		},
		data() {
			return {
				infoData: {},
				visitList: [],
				showVisitCard: false,
				relationTrans: {},
				beginTime: '',
				endTime: '',
				checkType: '0',
				payList: [],
			}
		},
		onLoad(options) {
			if (uni.getStorageSync('currentVisitCard')) {
				this.infoData = JSON.parse(uni.getStorageSync('currentVisitCard'))
			}
			let oneDay = 24 * 60 * 60 * 1000
			this.beginTime = this.$parseTime(new Date(Date.now() - 7 * oneDay), '{y}-{m}-{d}')
			this.endTime = this.$parseTime(new Date(), '{y}-{m}-{d}')
			this.getCardList()
			this.getDict()
			this.getList()

		},
		onPullDownRefresh() {
			this.getList()
		},
		methods: {
			getCardList() {
				let openid = uni.getStorageSync('openid') || ''
				let params = {
					hospitalCode: JSON.parse(uni.getStorageSync('hospital')).hospitalCode || '',
					openId: openid,
				}
				getPatientBaseList(params).then(res => {
					if (res.code == 200) {
						this.visitList = res.rows
					}
				})
			},
			getList() {
				let obj = {
					endTime: this.endTime || '',
					idNum: this.infoData.idNum || '',
					name: this.infoData.name || '',
					startTime: this.beginTime || '',
					zyh: this.infoData.zyh || '',
				}
				getDepositRecord(obj).then(res => {
					console.log(res, 111)
					//数据请求完成之后停止下拉刷新
					uni.stopPullDownRefresh();
					this.payList = res.data || []

				})
			},
			close() {
				this.showVisitCard = false
				EventBus.$emit('loadVisitor', '')
				if (uni.getStorageSync('currentVisitCard')) {
					this.infoData = JSON.parse(uni.getStorageSync('currentVisitCard'))
				}
				this.getList()
			},
			/* 开始日期 */
			beginChange(e) {
				this.getList()
			},
			/* 结束日期 */
			endChange(e) {
				this.getList()
			},
			/* 字典 */
			getDict() {
				getDictType({
					dictType: 'sys_relation'
				}).then(res => {
					if (res.code == 200) {
						res.rows.forEach(item => {
							this.relationTrans[item.dictValue] = item.dictLabel
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: rgb(245, 245, 245);
	}

	.pay_type {
		width: 80vw;
		padding: 24rpx;

		.center {
			background-color: #F3F8FF;
			border-radius: 10rpx;
			margin: 60rpx 0;

			.item {
				display: flex;
				align-items: center;
				padding: 40rpx 30rpx;
			}

			.borderBottom {
				border-bottom: 1px solid #eee;
			}
		}

		.top {
			display: flex;
			align-items: center;
			justify-content: space-between;


		}
	}

	.footer_btn {
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-around;
		text-align: center;
		width: 100%;
		padding: 24rpx;
		background-color: #fff;

		.u-button {
			width: 40%;
		}
	}

	.noCard {
		width: 100%;
		text-align: center;
		color: #666666;
		padding: 24rpx 0 0 0;
		margin-top: 72rpx;
		color: #808080;

		.images {
			width: 100%;
			margin-bottom: 40rpx;
			color: #666666;

			img {
				width: 55%;
				text-align: center;
			}
		}
	}

	.list {
		padding: 24rpx;
		margin: 0 auto;

		.doctorItem {
			background-color: #fff;
			border-radius: 8px;
			padding: 24rpx 0 24rpx 0;
			margin-bottom: 24rpx;

			.top,
			.bottom {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 24rpx 0 24rpx;

			}

		}


	}

	.screenType {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 20rpx;
		background-color: rgb(92, 147, 249);
		justify-content: space-around;
		color: #fff;

		.typeLeft,
		.typeRight {
			display: flex;
			flex: 1;
			text-align: center;
			align-items: center;
		}
	}

	.visitor {
		width: 100%;
		// background-color: rgb(92, 147, 249);
		background: url('@/static/images/report-small-bg.png') no-repeat left center, linear-gradient(180deg, rgba(197, 218, 255, 1) 0%, rgba(92, 147, 249, 1) 100%);
		background-size: auto 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 24rpx 0 24rpx;
		color: #3C537D;

		.outside {
			width: 100%;
			background-color: #fff;
			padding: 12rpx 12rpx 0 12rpx;
			border-radius: 8px 8px 0 0;
			background: url('@/static/images/card_bg.png') no-repeat;
			background-size: 100% 100%;

			.within {
				border-radius: 8px 8px 0 0;

				.info {
					padding: 16rpx 28rpx 20rpx;
					font-size: 34rpx;

					.name {
						display: flex;
						align-items: center;

						.classType {
							display: inline-block;
							margin: 0 36rpx;
						}

						.btn {
							font-size: 28rpx;
							padding: 7rpx 14rpx;
							background: linear-gradient(90deg, rgba(77, 142, 255, 1) 0%, rgba(94, 150, 247, 1) 100%);
							color: #fff;
							display: flex;
							align-items: center;
							border-radius: 5px;
						}
					}

					.cord {
						font-size: 28rpx;
						padding: 16rpx 0 8rpx;
					}
				}
			}
		}
	}
</style>